<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        background-color: slategrey;
    }
    
        .box {
            width: 480px;
            height: 300px;
            border: 1px yellow solid;
        }
        
        .ss {
            width: 28px;
            height: 28px;
            border: 1px black solid;
            float: left;
        }
        
        .red {
            background-color: red;
        }
        
        .green {
            background-color:cadetblue;
        }
        
        .blue {
            background-color: blue;
        }
         .bg-active{
            background-color:gold ;
        }
    </style>
</head>

<body>
 <form>
   
    <input type="button" value="开始游戏"  onclick="startCount()"/>
    <input type="button" value="暂停游戏"  onclick="stopCount()" />
 <input type="text" id="count" />
  </form>

<p align="left"><input type="button" name="renovates" value="重新开始" onclick="renovates()"</p>
 <input name="button" type="button" onClick="rec()" value="点击我，退出游戏" />

    <div class="box" id="box">

    </div>
</body>
<script>
 var num=0;//计时器
  var i;
  function startCount(){
    document.getElementById('count').value=num;
    num=num+1;
    i=setTimeout("startCount()",1000);
  }
  function stopCount(){
    clearTimeout(i);
  }


function renovates(){
        document.location.reload();//刷新
         }

    var arr = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0],
    [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
    [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]];
    var tempArr = [];

    var checkArr = function (x, y) {
        var count = 0;
        if (x > 0 && y > 0) {
            if (arr[x - 1][y - 1] == 1) {
                count++;
            }
        }
        if (y > 0) {
            if (arr[x][y - 1] == 1) {
                count++;
            }
        }
        if (x < 9 && y > 0) {
            if (arr[x + 1][y - 1] == 1) {
                count++;
            }
        }
        if (x > 0) {
            if (arr[x - 1][y] == 1) {
                count++;
            }
        }
        if (x < 9) {
            if (arr[x + 1][y] == 1) {
                count++;
            }
        }
        if (x > 0 && y < 9) {
            if (arr[x - 1][y + 1] == 1) {
                count++;
            }
        }
        if (y < 9) {
            if (arr[x][y + 1] == 1) {
                count++;
            }
        }
        if (x < 9 && y < 9) {
            if (arr[x + 1][y + 1] == 1) {
                count++;
            }
        }

        return count;
    }

    var init = function () {
        var box = document.getElementById("box");

        for (var i = 0; i < arr.length; i++) {
            var ta = [];
            for (var j = 0; j < arr[i].length; j++) {
                if (arr[i][j] == 1) {
                    ta.push(-1);
                }
                else {
                    var temp = checkArr(i, j);
                    ta.push(temp);
                }


                var div = document.createElement("div");
                div.className = "ss green";
            
                var a = function (a, b) {

                    div.onclick = function () {
            
                        var temp = tempArr[a][b];
                       
                        if (temp == -1) {
                            this.className = "ss red";
                            alert("游戏结束了！"); 
                           
                       
                        }
                        else {
                            this.className = "ss";
                            this.innerHTML=tempArr[a][b];
                                
                        }
                    }
                }

                a(i, j);
                box.appendChild(div);

            }
            tempArr.push(ta);
        }

    }
    function rec(){
    var mymessage=confirm("确认退出游戏？");
    if(mymessage==true)
    {
    	window.close(); 
    }
    else
    {
       
    }
  }    
   

    init();

</script>

</html>